<template>
<el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">提成项目重审</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
    "
    :column="2"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
    <el-table
      :data="tableData"
      border
      style="width: 80%; margin: 20px auto;border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="empName" label="被考核人" />
      <el-table-column prop="name" label="提成考核"  />
      <el-table-column prop="target1" label="条目" width="150" />
      <el-table-column prop="inTarget1" label="/￥"  width="100" />
      <el-table-column prop="target2" label="条目" width="150" />
      <el-table-column prop="inTarget2" label="/￥"  width="100" />
      <el-table-column prop="result" label="结算/￥"  />
    </el-table>
    <el-button type="primary" @click="submitForm" class="button">重审通过</el-button>
</template>

<script  setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getSecondBack} from "@/api/empKpi"
import { useRoute } from 'vue-router'
import {backAddKpi} from "@/api/resultSecond"
import { ElMessage } from 'element-plus'

const route = useRoute();
let deptName = route.query.deptName
let position = route.query.position;

const tableData=ref([])
onBeforeMount(()=>{
let positionId = route.query.id;
    getSecondBack({positionId})
    .then(data=>{
        tableData.value=data.data;
    });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
let positionId = route.query.id;
  let positionType=route.query.type
  backAddKpi({assessorId, positionId, positionType})
  .then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "提交成功",
          type: "success",
        });
        goback()
      } else {
        ElMessage.error("提交成功");
      }
    }
  );
};
</script>
<style scoped>
.el-card {
  border-radius: 10px;
  margin: 20px auto;
}
:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
.button{
        width: 120px;
        height: 40px;
        margin: 10px 130px;
        float: right;
    }
</style>
